* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}
button {
	outline: none;
}

input {
	outline: none;
}

// 定义头像
.portrait {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

// 第二级的文本
.secondary-text {
	font-size: 15px;
	color: #6b7795;
}

@background_color: #3491fa;
// @background_image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
@button_active_color: rgba(17, 75, 163, 0.5);

body {
	background-color: #f2f3f5;
	height: 100vh;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: @background_color;
	header {
		display: flex;
		height: 70px;
		justify-content: space-between;
		background-color: @background_color;
		// border-bottom: 1px solid #fff;
		padding: 5px;
		.left {
			display: flex;
			.message {
				margin-left: 10px;
				.slogan {
					width: 220px;
					height: 28px;
					line-height: 28px;
					font-size: 14px;
					margin-top: 5px;
					// color: #e5e6eb;
					white-space: nowrap; /*强制在一行显示*/
					text-overflow: ellipsis; /*设置超出内容显示...*/
					overflow: hidden; /*一定不能少 超出的内容进行隐藏*/
				}
			}
		}
		.right {
			line-height: 60px;
			margin-right: 10px;
		}
	}
	.content-box {
		flex: 1;
		display: flex;

		aside {
			min-width: 70px;
			width: 70px;
			.choice-btn {
				width: 100%;
				height: 60px;
				border-radius: 20%;
				border: 1px transparent;
				margin: 1px 0;
				background-color: @background_color;
			}
			.choice-btn:hover {
				background-color: @button_active_color;
				cursor: pointer;
			}
			.active {
				background-color: @button_active_color;
			}
		}

		main {
			display: flex;
			width: 100%;
			height: calc(100vh - 70px);

			min-width: 1200px;
			background-color: #fff;
			border-radius: 10px 0 0 0;
			.chat-list {
				height: calc(100vh - 70px);
				width: 300px;
				display: flex;
				flex-direction: column;
				flex: 1;
				border-right: 1px solid #e5e6eb;
				.search {
					margin: 2px;
					text-align: center;
					input {
						width: 100%;
						height: 40px;
						line-height: 40px;
						padding: 0 5px;
						font-size: 18px;
						border-radius: 10px;
						border: 1.5px solid black;
						background-color: rbg(103, 115, 138);
					}
				}
				.list {
					flex: 1;
					height: calc(100vh - 70px - 40px);
					overflow: hidden;
					ul {
						overflow: auto;
						height: 100%;
						padding: 5px;
						li {
							display: flex;
							// box-sizing: border-box;
							height: 80px;
							padding: 10px;
							border: 1px solid transparent;
							border-radius: 8px;
							.chat-object {
								flex: 1;
								height: 60px;
								margin-left: 10px;
								.chat-header {
									display: flex;
									justify-content: space-between;
									.name {
										margin-bottom: 8px;
									}
								}
							}
						}
						li:hover {
							background-color: #e5e6eb;
						}
						.list-active {
							background-color: #e5e6eb;
						}
					}
					// 下面是对滚动条滑块的一些设置
					ul::-webkit-scrollbar {
						width: 5px;
					}
					/*定义滑块，内阴影及圆角*/
					ul::-webkit-scrollbar-thumb {
						/*width: 10px;*/
						border-radius: 10px;
						// -webkit-box-shadow这个是设置阴影
						-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
						background-color: #e5e6eb;
					}
				}
			}
			.chat-page {
				display: flex;
				flex: 2.5;
				background-color: #f7f8fa;
				flex-direction: column;
				.object-info {
					flex: 1;
					display: flex;
					justify-content: space-between;
					border-bottom: 3px solid #c9cdd4;
					.info {
						// width: 120px;
						display: flex;
						margin-left: 10px;
						flex-direction: row;
						align-items: center;
						.name {
							margin-left: 10px;
						}
					}
					.tool {
						margin-right: 20px;
						display: flex;
						align-items: center;
						.icon {
							margin-right: 3px;
						}
					}
				}
				.chat {
					flex: 5;
				}
				.send {
					flex: 2;
					position: relative;
					border-top: 3px solid #c9cdd4;
					.content {
						width: 100%;
						height: 140px;
						background-color: #f7f8fa;
						font-size: 20px;
						outline: none;
						border: none;
					}
					.go {
						position: absolute;
						right: 20px;
						bottom: 10px;
						width: 60px;
						height: 35px;
						line-height: 35px;
						border: 1px solid transparent;
						border-radius: 10px;
						color: #fff;
						background-color: @background_color;
					}
					.go:hover {
						opacity: 0.7;
						cursor: pointer;
					}
					.go:active {
						opacity: 1;
					}
				}
			}
		}
	}
}
